<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>省市县三联动</title>
		<style type="text/css">
			#container {
				width: 500px;
				min-height: 300px;
				background-color: lightgreen;
				margin: auto;
				text-align: center;
				padding: 10px;
			}
		</style>
		<script type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {
				function queryData(obj, callback) {
					$.ajax({
						type: 'get',
						url: 'http://localhost/select.php',
						data: obj,
						dataType: 'json',
						success: function(data) {

							callback(data);
						}
					});
				}
//             加载省级数据
				queryData({
					flag: 1
				}, function(data) {
					var option = '';
					$.each(data, function(i, e) {
					   option += '<option value="' + e.id + '">'+e.province+'</option>';
						//					        console.log(data);
					});
                      $("#province").append(option);
				});
				$('#province').change(function(){
//				$('#province').find(function(){
//	                $("#city option:gt(0)").find('option:gt(0)').remove();
                    $("#city option:gt(0)").remove();
					queryData({
						flag:2,
						pId:$(this).val();
					},function(data){
						var option='';
						$.each(data,function(i,e){
							option+='<option value="' + e.id + '">'+e.city+'</option>';
						});
						$("#city").append(option);
					});
				});
				
				$('#city').change(function(){
                    $("#county option:gt(0)").remove();
					queryData({
						flag:3,
						cId:$(this).val();
					},function(data){
						var option='';
						$.each(data,function(i,e){
							option+='<option value="' + e.id + '">'+e.county+'</option>';
						});
						$("#county").append(option);
					});
				});
			});
		</script>
	</head>

	<body>
		<div id="container">
			<label>
				省：<select id="province">
					<option>请选择省...</option>
				</select>
			</label>
			<label>
				市：<select id='city'>
					<option>请选择省...</option>
				</select>
			</label>
			<label>
			县：<select id="county">
					<option>请选择县...</option>
				</select>
			</label>
		</div>
	</body>

</html>